import { action, controller, Controller, routeData, ContentResult } from "maishu-node-mvc";
import { request, response } from "maishu-node-mvc/dist/attributes";
import http = require("http");

@controller()
export class PagesController {
    @action("/mobile")
    mobileIndex(@routeData { id }, @request request: http.IncomingMessage, @response response: http.ServerResponse) {
        let m = (request.headers["user-agent"] || "").match(/MicroMessenger/i);
        let isWeiXin = m != null && m[0] == "MicroMessenger";
        if (isWeiXin) {
            let loginInfo = JSON.stringify({});
            response.setHeader("Set-Cookie", `app-login-info=${loginInfo}`);
        }
        // return this.content(mobileIndexHTML, "text/html; charset=utf-8");
        return new ContentResult(mobileIndexHTML, "text/html; charset=utf-8");
    }
}

let mobileIndexHTML = `<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>

    <link rel="stylesheet" type="text/css" href="content/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="assert/lib/Font-Awesome-3.2.1/css/font-awesome.css" />

    <style>
        .mobile-page {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .mobile-page .loading {
            text-align: center;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        @media screen and (min-width:480px) {
            .mobile-page {
                max-width: 480px;
                left: 50%;
                margin-left: -240px;
            }

            .page {
                max-width: 480px;
                left: 50%;
                margin-left: -240px;
                position: absolute;
            }
        }
    </style>
</head>

<body>
    <script data-main="mobile/index" src="/node_modules/requirejs/require.js"></script>
</body>

</html>`;